import { todoGet } from '@/redux-toolkit/todo/slice'
import { useAppDispatch, useSelector } from '@/redux-toolkit/store'
import { List, Flex, Button, Spin, Space, Divider } from 'antd'
import { useTranslation } from 'react-i18next'
import { changeLanguageActionCreator } from '@/redux-toolkit/language'
import { getTodoList } from '@/redux-toolkit/thunk/action'

function App() {
	const dispatch = useAppDispatch()
	const language = useSelector((state) => state.language) // 当前语言
	const { t } = useTranslation() // 国际化
	// toolkit 异步
	const todoList = useSelector((state) => state.todo.todoList)
	const loading = useSelector((state) => state.todo.loading)
	// const error = useSelector((state) => state.todo.error)
	// thunk 异步
	const todoListThunk = useSelector((state) => state.todoThunk.productList)
	const loadingThunk = useSelector((state) => state.todoThunk.loading)
	// const errorThunk = useSelector((state) => state.todoThunk.error)
	return (
		<Flex vertical gap={10}>
			<Space size={10}>
				<Button type="primary" onClick={() => dispatch(todoGet())}>
					{t('buttonText')}
				</Button>
				<Button onClick={() => dispatch(changeLanguageActionCreator(language === 'zh' ? 'en' : 'zh'))}>
					{t('switchLanguage')}
				</Button>
			</Space>
			{loading ? (
				<Spin />
			) : (
				<List bordered dataSource={todoList} renderItem={(item) => <List.Item>{item.title}</List.Item>} />
			)}
			<Divider />
			<Space size={10}>
				<Button onClick={() => dispatch(getTodoList())}>thunk 获取</Button>
			</Space>
			{loadingThunk ? (
				<Spin />
			) : (
				<List bordered dataSource={todoListThunk} renderItem={(item) => <List.Item>{item.title}</List.Item>} />
			)}
		</Flex>
	)
}
export default App
